<template>
	<view class="mbti-modal" v-if="isOpen" @click="close">
		<view class="mbti-modal-content" @click.stop>
			<view class="mbti-modal-control" v-if="type=='control'">
				<view class="tip-text control-tip flex-row-center-center" v-if="titleSplit.isSplitTitle">
					{{titleSplit.before}}<text
						style="font-weight: 700;">{{titleSplit.middle}}</text>{{titleSplit.after}}
				</view>
				<view class="tip-text control-tip flex-row-center-center" v-if="!titleSplit.isSplitTitle">{{title}}
				</view>

				<view class="control-buttons flex-row-center-center">
					<view class="button-item flex-row-center-center" @click="cancel">{{canCaleBtnName}}</view>
					<view class="button-item flex-row-center-center" @click="confirm">{{confirmBtnName}}</view>
				</view>
			</view>
			<view class="mbti-modal-tip" v-if="type=='tip'">
				<view class="tip-icon flex-row-center-center">
					<image class="tip-icon-img" :src="tipIcon" mode="aspectFill"></image>
				</view>
				<view class="tip-text tip-nomal flex-row-center-center" v-if="titleSplit.isSplitTitle">
					{{titleSplit.before}}<text
						style="font-weight: 700;">{{titleSplit.middle}}</text>{{titleSplit.after}}
				</view>
				<view class="tip-text tip-nomal flex-row-center-center" v-if="!titleSplit.isSplitTitle">{{title}}</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "tip", // "tip 提示 control 操作"
				isOpen: false,
				canCaleBtnName: "取消",
				confirmBtnName: "确定",
				title: `WiFi连接失败，请重新连接`,
				clickKey: "",
				tipIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c9556c6c4a8a4b2ba7ebf4cea250392a.png",
				tipDuration: 0,
				code: ""
			}
		},
		computed: {
			titleSplit() {
				const start = this.title.indexOf('“');
				const end = this.title.indexOf('”', start + 1); // 确保后引号在前引号之后

				if (start === -1 || end === -1) {
					return {
						isSplitTitle: false,
					}; // 无完整引号对时返回原字符串
				}

				const before = this.title.substring(0, start + 1); // 包含前引号
				const middle = this.title.substring(start + 1, end); // 引号内容
				const after = this.title.substring(end); // 包含后引号及后续内容
				return {
					isSplitTitle: true,
					before,
					middle,
					after
				}

			}
		},
		created() {

		},
		methods: {
			open(e) {
				let {
					canCaleBtnName,
					confirmBtnName,
					title,
					tipIcon,
					type,
					tipDuration,
					code,
				} = e
				this.canCaleBtnName = canCaleBtnName ? canCaleBtnName : this.canCaleBtnName
				this.confirmBtnName = confirmBtnName ? confirmBtnName : this.confirmBtnName
				this.title = title ? title : this.title
				this.tipIcon = tipIcon ? tipIcon : this.tipIcon
				this.type = type ? type : this.type
				this.tipDuration = tipDuration ? tipDuration : this.tipDuration
				this.code = code ? code : this.code
				this.isOpen = true

				if (this.type == "tip" && this.tipDuration) {
					setTimeout(() => {
						this.close()
					}, 2000)
				}
			},
			close() {
				this.$emit("close")
				this.isOpen = false
			},
			confirm() {
				this.$emit("confirm", {
					code: this.code
				})
				this.close()
				// this.clickKey = "confirm"
				// setTimeout(() => {
				// 	this.clickKey = ""
				// 	this.$emit("confirm")
				// 	this.close()
				// }, 200)

			},
			cancel() {
				this.$emit("cancel")
				this.isOpen = false
				// this.close()
				// this.clickKey = "cancel"
				// setTimeout(() => {
				// 	this.clickKey = ""
				// 	this.$emit("cancel")
				// 	this.close()
				// }, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mbti-modal {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(30rpx);
		z-index: 99999999999;

		.mbti-modal-content {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 762rpx;
			width: 574rpx;
			height: 312rpx;
			background: #FFFFFF;
			border-radius: 40rpx;

			.mbti-modal-control {
				width: 100%;
				height: 100%;

				.control-tip {
					margin-top: 80rpx;
					margin-bottom: 68rpx;
				}



				.control-buttons {
					width: 100%;

					.button-item {
						width: 224rpx;
						height: 72rpx;
						border-radius: 16rpx;
						border: 1rpx solid #979797;
						margin-right: 30rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #979797;
						line-height: 40rpx;


						&:last-child {
							margin-right: 0rpx;
							border-color: #E02020;
							color: #E02020;
						}
					}
				}
			}

			.mbti-modal-tip {
				width: 100%;
				height: 100%;

				.tip-icon {
					width: 100%;
					height: 52rpx;
					margin-top: 80rpx;

					.tip-icon-img {
						width: 64rpx;
						height: 56rpx;
					}

				}

				.tip-nomal {
					margin-top: 52rpx;
				}
			}

			.tip-text {
				width: 100%;
				height: 44rpx;
				font-weight: 300;
				font-size: 32rpx;
				color: #494949;
				line-height: 44rpx;
			}
		}
	}

	.btn-clicked {
		animation: buttonClickScale 0.2s ease-in-out;
	}
</style>